<template>
    <view > 
      <transition name="slide">
        <view v-if="showInfo" class="backShadow" @click.self="closePopup">
          <view class="content" :class="{ 'slide-out': slideOut }" @click.stop>
            <view class="animated">
              <view class="info_app">
                <view class="main">
                  <scroll-view class="container" scroll-y>
                    <view v-for="(item, index) in list" :key="index" class="item">
                      <view class="question" @click="toggle(index)">
                        <text class="question-text">{{ item.question }}</text>
                        <text class="arrow feiIconfont icon-zhaobiaotoutiao_shouqiicon" :class="{ open: item.open }"></text>
                      </view>
                      <view v-if="item.open" class="answer">
                        <view v-for="(answer, idx) in item.answers" :key="idx" class="answer-item">
                          {{ answer }}
                        </view>
                      </view>
                    </view>
                  </scroll-view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </transition>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        showInfo: false,
        agreementChecked: false,
        slideOut: false,
        list: [
          {
            question: 'Q1: 朴朴超市基础合作标准有哪些？',
            answers: [
              '1. 企业征信情况良好，合作业务和商品在营业执照允许经营范围内；',
              '2. 公司资质证书齐全，非个体工商户；',
              '3. 经营主体成立时间满1年以上，注册资金在100万以上（不同商品要求不同，在朴朴超市官网-准入要求可按品类查询）；',
              '4. 除专供线下商品的供应商外，均要求为一般纳税人；'
            ],
            open: true
          },
          {
            question: 'Q2: 有哪些渠道可以提交合作申请？',
            answers: ['合作申请渠道可以通过朴朴超市官网进行在线申请。'],
            open: false
          },
          {
            question: 'Q3: 我可以直接联系采购洽谈合作吗？',
            answers: ['您可以通过官网申请合作，审核通过后会有专人联系您。'],
            open: false
          },
          {
            question: 'Q4: 我可以申请加盟合作吗？',
            answers: ['目前朴朴超市暂不接受加盟合作。'],
            open: false
          },
          {
            question: 'Q5: 哪些城市可以申请合作？',
            answers: ['您可以在朴朴超市官网查看可申请合作的城市列表。'],
            open: false
          },
          {
            question: 'Q6: 哪些城市可以申请合作？',
            answers: ['您可以在朴朴超市官网查看可申请合作的城市列表。'],
            open: false
          },
          {
            question: 'Q7: 哪些城市可以申请合作？',
            answers: ['您可以在朴朴超市官网查看可申请合作的城市列表。'],
            open: false
          },
          {
            question: 'Q8: 哪些城市可以申请合作？',
            answers: ['您可以在朴朴超市官网查看可申请合作的城市列表。'],
            open: false
          }
        ]
      };
    },
    methods: {
      toggle(index) {
        this.list[index].open = !this.list[index].open;
      },
      handlerApply() {
        this.showInfo = true;
        this.slideOut = false;
      },
      closePopup() {
        this.slideOut = true;
        setTimeout(() => {
          this.showInfo = false;
          this.slideOut = false;
        }, 500);
      }
    }
  };
  </script>
  
  <style>
  @import "./common_problem.scss";
  @keyframes slideInFromBottom {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0%);
    }
  }
  @keyframes slideOutToBottom {
    from {
      transform: translateY(0%);
    }
    to {
      transform: translateY(100%);
    }
  }
  .animated {
    animation: slideInFromBottom 0.5s ease;
  }
  .slide-out {
    animation: slideOutToBottom 0.5s ease;
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: transform 0.5s;
  }
  .slide-enter,
  .slide-leave-to {
    transform: translateY(100%);
  }
  .backShadow {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 背景阴影 */
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 内容在底部 */
    z-index: 99;
  }
  .content {
    background-color: white; /* 背景颜色为白色 */
    width: 100%;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); /* 外层阴影 */
    padding: 20px;
    border-radius: 8px 8px 0 0;
  }
  .next {
    background: #00a651;
  }
  .info_app {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .main {
    width: 100%;
  }
  .main h2 {
    line-height: 60px;
    text-align: center;
  }
  .main p {
    margin-left: 5%;
    line-height: 40px;
  }
  .footer_app {
    display: flex;
    justify-content: space-around;
  }
  .footer_app .btn {
    width: 40%;

  }

  .btn::after{
    border: indianred;
  }
  </style>